<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入ECharts图表库
import * as echarts from 'echarts';
import { Search, View, Edit } from '@element-plus/icons-vue';
// import AppSidebar from '@/components/common/AppSidebar.vue';
import {
    fetchReportList,
    fetchReport,
    fetchReportById,
    resubmitReport,
    fetchReductionTypes,
    fetchReasons,
} from '@/api/report';

// 企业ID - TODO: 从登录信息获取
const enterpriseId = ref('ENTERPRISE_001');

// 趋势分析相关
const trendData = ref([]);
const trendLoading = ref(false);
const trendChartRef = ref(null);
const trendChartInstance = ref(null);
const trendCurrentPage = ref(1);
const trendPageSize = ref(6); // 默认显示6个月数据
const trendTotal = ref(0);
const trendShowPage = ref(false); // 是否显示分页控制
const trendTimeRange = ref('1'); // 默认显示1年数据（12个月）
const activeTab = ref('report'); // 当前激活的标签：report-报表查询, trend-趋势分析

// 筛选条件
const searchForm = reactive({
    reportingPeriod: null, // 报表期
    status: null, // 状态：-1(未填报)、0(已暂存)、1(待市级审核)、2(待省级审核)、3(审核通过)、4(已归档)、5(驳回)
    hasReduction: null, // 是否减少人员：true/false/null
});

// 列表数据
const reportList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 详情弹窗
const detailDialogVisible = ref(false);
const currentReport = ref(null);
const detailLoading = ref(false);

// 修改表单弹窗
const editDialogVisible = ref(false);
const editForm = reactive({
    reporting_period: '',
    initial_employees: null,
    current_employees: null,
    reduction_type_code: '',
    reduction_type_desc: '',
    primary_reason_code: '',
    primary_reason_desc: '',
    secondary_reason_code: '',
    secondary_reason_desc: '',
    tertiary_reason_code: '',
    tertiary_reason_desc: '',
});
const editLoading = ref(false);
const editFormRef = ref(null);

// 字典数据
const reductionTypes = ref([]);
const reductionReasons = ref([]);
const OTHER_CODE = 'OTHER';

// 判断是否有减员
const hasReduction = computed(() => {
    return (
        typeof editForm.initial_employees === 'number' &&
        typeof editForm.current_employees === 'number' &&
        editForm.current_employees < editForm.initial_employees
    );
});

// 判断原因是否为"其他"
const isOtherReason = (code) => code === OTHER_CODE;
const isOtherType = computed(() => editForm.reduction_type_code === OTHER_CODE);

// 状态配置 - 数字状态映射
const statusConfig = {
    '-1': { label: '未填报', type: 'info' },
    0: { label: '已暂存', type: 'warning' },
    1: { label: '待市级审核', type: 'info' },
    2: { label: '待省级审核', type: 'info' },
    3: { label: '审核通过', type: 'success' },
    4: { label: '已归档', type: 'primary' },
    5: { label: '驳回', type: 'danger' },
};

// 原因下拉选项
const reasonOptions = computed(() => {
    const list = Array.isArray(reductionReasons.value) ? reductionReasons.value : [];
    return {
        primary: list,
        secondary: list.filter((item) => item.value !== editForm.primary_reason_code),
        tertiary: list.filter(
            (item) =>
                item.value !== editForm.primary_reason_code &&
                item.value !== editForm.secondary_reason_code
        ),
    };
});

// 加载报表列表
const loadReportList = async () => {
    loading.value = true;
    try {
        // 构建查询参数 - 注意：API文档说明不需要传enterprise_id
        const params = {};

        // 添加筛选条件
        if (searchForm.reportingPeriod && searchForm.reportingPeriod !== '') {
            params.reporting_period = searchForm.reportingPeriod;
        }

        if (
            searchForm.status !== null &&
            searchForm.status !== undefined &&
            searchForm.status !== ''
        ) {
            params.status = searchForm.status;
        }

        // 获取完整数据列表（不分页，由前端处理分页）
        // 注意：如果后端数据量很大，后续可以修改为后端分页，但目前先使用前端分页
        const result = await fetchReportList(params);

        // 确保result是数组格式
        let allData = Array.isArray(result) ? result : [];

        // 前端实现完整的筛选逻辑（作为后端筛选的补充和备选）
        allData = allData.filter((item) => {
            // 报表期筛选
            if (searchForm.reportingPeriod && searchForm.reportingPeriod !== '') {
                // 确保item.reporting_period存在且为字符串类型
                const itemReportingPeriod = String(item.reporting_period || '');
                const searchPeriod = String(searchForm.reportingPeriod);
                if (itemReportingPeriod !== searchPeriod) {
                    return false;
                }
            }

            // 状态筛选
            if (
                searchForm.status !== null &&
                searchForm.status !== undefined &&
                searchForm.status !== ''
            ) {
                // 确保item.status存在且类型转换正确比较
                const itemStatus = String(item.status || '');
                const searchStatus = String(searchForm.status);
                if (itemStatus !== searchStatus) {
                    return false;
                }
            }

            // 是否减少人员筛选
            if (searchForm.hasReduction !== null) {
                // 确保人员数据为数字类型再进行比较
                const initialEmployees = Number(item.initial_employees) || 0;
                const currentEmployees = Number(item.current_employees) || 0;
                const hasReduction = currentEmployees < initialEmployees;
                if (hasReduction !== searchForm.hasReduction) {
                    return false;
                }
            }

            return true;
        });

        // 计算总数
        total.value = allData.length;

        // 前端实现分页逻辑
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        reportList.value = allData.slice(start, end);

        // 如果当前页没有数据且不是第一页，自动跳转到上一页
        if (reportList.value.length === 0 && currentPage.value > 1) {
            currentPage.value = Math.max(1, Math.ceil(total.value / pageSize.value));
            const prevStart = (currentPage.value - 1) * pageSize.value;
            const prevEnd = prevStart + pageSize.value;
            reportList.value = allData.slice(prevStart, prevEnd);
        }
    } catch (error) {
        console.error('加载报表列表失败:', error);
        ElMessage.error(error?.message || '加载报表列表失败');
        reportList.value = [];
        total.value = 0;
    } finally {
        loading.value = false;
    }
};

// 搜索
const handleSearch = () => {
    currentPage.value = 1;
    loadReportList();
};

// 重置筛选条件
const handleReset = () => {
    searchForm.reportingPeriod = null;
    searchForm.status = null;
    searchForm.hasReduction = null;
    currentPage.value = 1;
    loadReportList();
};

// 加载字典数据
const loadDictionaries = async () => {
    try {
        const [types, reasons] = await Promise.all([fetchReductionTypes(), fetchReasons()]);

        reductionTypes.value = Array.isArray(types)
            ? types.map((item) => ({
                  value: item.value ?? '',
                  label: item.label ?? item.value ?? '',
                  description: item.description ?? '',
              }))
            : [];

        reductionReasons.value = Array.isArray(reasons)
            ? reasons.map((item) => ({
                  value: item.value ?? '',
                  label: item.label ?? item.value ?? '',
                  description: item.description ?? '',
              }))
            : [];
    } catch (error) {
        ElMessage.error(error?.message || '减员类型/原因字典加载失败');
    }
};

// 旧报表数据
const oldReport = ref(null);

// 查看报表详情
const handleViewReport = async (report) => {
    detailLoading.value = true;
    try {
        // 先显示弹窗，这样用户能看到加载状态
        detailDialogVisible.value = true;

        // 重置旧报表数据
        oldReport.value = null;

        // 获取最新报表数据
        const data = await fetchReport({ reporting_period: report.reporting_period });

        // 验证返回的数据是否有效
        if (!data || typeof data !== 'object') {
            currentReport.value = {
                reporting_period: report.reporting_period,
                status: report.status,
                initial_employees: report.initial_employees,
                current_employees: report.current_employees,
                reduction_type_code: report.reduction_type_code,
                reduction_type_desc: report.reduction_type_desc,
                primary_reason_code: report.primary_reason_code,
                primary_reason_desc: report.primary_reason_desc,
                secondary_reason_code: report.secondary_reason_code,
                secondary_reason_desc: report.secondary_reason_desc,
                tertiary_reason_code: report.tertiary_reason_code,
                tertiary_reason_desc: report.tertiary_reason_desc,
                updated_at: report.updated_at,
                submitted_at: report.submitted_at,
                reason_return: report.reason_return,
            };
            ElMessage.warning('报表详情数据加载不完整，显示基础信息');
        } else {
            currentReport.value = data;
        }

        // 检查是否有old_id，如果有则获取旧数据
        if (report.old_id) {
            try {
                const oldData = await fetchReportById(report.old_id);
                if (oldData && typeof oldData === 'object') {
                    oldReport.value = oldData;
                }
            } catch (oldError) {
                console.warn('加载旧报表数据失败:', oldError);
                // 不影响主流程，继续显示最新数据
            }
        }
    } catch (error) {
        // 即使API调用失败，也显示基础信息
        currentReport.value = {
            reporting_period: report.reporting_period,
            status: report.status,
            initial_employees: report.initial_employees,
            current_employees: report.current_employees,
            reduction_type_code: report.reduction_type_code,
            reduction_type_desc: report.reduction_type_desc,
            primary_reason_code: report.primary_reason_code,
            primary_reason_desc: report.primary_reason_desc,
            secondary_reason_code: report.secondary_reason_code,
            secondary_reason_desc: report.secondary_reason_desc,
            tertiary_reason_code: report.tertiary_reason_code,
            tertiary_reason_desc: report.tertiary_reason_desc,
            updated_at: report.updated_at,
            submitted_at: report.submitted_at,
            reason_return: report.reason_return,
        };
        ElMessage.error('加载报表详情失败，显示列表中的基础信息');
    } finally {
        detailLoading.value = false;
    }
};

// 打开修改弹窗
const handleEditReport = async (report) => {
    try {
        const data = await fetchReport({ reporting_period: report.reporting_period });
        // 填充编辑表单
        editForm.reporting_period = data.reporting_period;
        editForm.initial_employees = data.initial_employees;
        editForm.current_employees = data.current_employees;
        editForm.reduction_type_code = data.reduction_type_code || '';
        editForm.reduction_type_desc = data.reduction_type_desc || '';
        editForm.primary_reason_code = data.primary_reason_code || '';
        editForm.primary_reason_desc = data.primary_reason_desc || '';
        editForm.secondary_reason_code = data.secondary_reason_code || '';
        editForm.secondary_reason_desc = data.secondary_reason_desc || '';
        editForm.tertiary_reason_code = data.tertiary_reason_code || '';
        editForm.tertiary_reason_desc = data.tertiary_reason_desc || '';

        // 确保字典数据已加载
        if (reductionTypes.value.length === 0) {
            await loadDictionaries();
        }

        detailDialogVisible.value = false; // 关闭详情弹窗
        editDialogVisible.value = true; // 打开编辑弹窗
    } catch (error) {
        ElMessage.error(error?.message || '加载报表数据失败');
    }
};

// 原因选择联动
const handleReasonChange = (level, value) => {
    if (level === 'primary') {
        // 如果清空主要原因，同时清空次要和第三原因
        if (!value) {
            editForm.secondary_reason_code = '';
            editForm.secondary_reason_desc = '';
            editForm.tertiary_reason_code = '';
            editForm.tertiary_reason_desc = '';
            return;
        }

        // 如果主要原因与次要原因重复，清空次要原因
        if (value === editForm.secondary_reason_code) {
            editForm.secondary_reason_code = '';
            editForm.secondary_reason_desc = '';
        }
        // 如果主要原因与第三原因重复，清空第三原因
        if (value === editForm.tertiary_reason_code) {
            editForm.tertiary_reason_code = '';
            editForm.tertiary_reason_desc = '';
        }
        return;
    }

    if (level === 'secondary') {
        // 如果清空次要原因，同时清空第三原因
        if (!value) {
            editForm.tertiary_reason_code = '';
            editForm.tertiary_reason_desc = '';
            return;
        }

        // 次要原因不能与主要原因相同
        if (value === editForm.primary_reason_code) {
            editForm.secondary_reason_code = '';
            ElMessage.warning('次要原因不能与主要原因相同');
            return;
        }
        // 如果次要原因与第三原因重复，清空第三原因
        if (value === editForm.tertiary_reason_code) {
            editForm.tertiary_reason_code = '';
            editForm.tertiary_reason_desc = '';
        }
        return;
    }

    // 第三原因
    if (
        value &&
        (value === editForm.primary_reason_code || value === editForm.secondary_reason_code)
    ) {
        editForm.tertiary_reason_code = '';
        ElMessage.warning('第三原因不能与前两项原因重复');
        return;
    }
};

// 表单验证规则
const editRules = reactive({
    initial_employees: [
        { required: true, message: '请填写上期人数', trigger: ['blur', 'change'] },
        { type: 'number', min: 0, message: '上期人数不能为负数', trigger: ['blur', 'change'] },
    ],
    current_employees: [
        { required: true, message: '请填写这期人数', trigger: ['blur', 'change'] },
        { type: 'number', min: 0, message: '这期人数不能为负数', trigger: ['blur', 'change'] },
    ],
    reduction_type_code: [
        {
            validator: (_, value, callback) => {
                if (hasReduction.value && !value) {
                    callback(new Error('当调查期人数小于上期人数时，请选择减员类型'));
                    return;
                }
                callback();
            },
            trigger: 'change',
        },
    ],
    reduction_type_desc: [
        {
            validator: (_, value, callback) => {
                if (isOtherType.value && !value?.trim()) {
                    callback(new Error('选择"其他"时，请补充减员类型说明'));
                    return;
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
    primary_reason_code: [
        {
            validator: (_, value, callback) => {
                if (hasReduction.value && !value) {
                    callback(new Error('当调查期人数小于上期人数时，请选择主要原因'));
                    return;
                }
                callback();
            },
            trigger: 'change',
        },
    ],
    primary_reason_desc: [
        {
            validator: (_, value, callback) => {
                if (editForm.primary_reason_code && !value?.trim()) {
                    callback(new Error('请填写主要原因说明'));
                    return;
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
    secondary_reason_desc: [
        {
            validator: (_, value, callback) => {
                if (editForm.secondary_reason_code && !value?.trim()) {
                    callback(new Error('请填写次要原因说明'));
                    return;
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
    tertiary_reason_desc: [
        {
            validator: (_, value, callback) => {
                if (editForm.tertiary_reason_code && !value?.trim()) {
                    callback(new Error('请填写第三原因说明'));
                    return;
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
});

// 保存修改
const handleSaveEdit = async () => {
    if (!editFormRef.value) return;

    try {
        await editFormRef.value.validate();
        editLoading.value = true;

        const submitData = {
            ...JSON.parse(JSON.stringify(editForm)),
            enterprise_id: enterpriseId.value,
        };

        await resubmitReport(submitData);

        ElMessage.success('修改成功，已重新提交审核');
        editDialogVisible.value = false;
        loadReportList(); // 重新加载列表
    } catch (error) {
        if (error?.message) {
            ElMessage.error(error.message);
        }
    } finally {
        editLoading.value = false;
    }
};

// 分页变化 - 页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val;
    loadReportList();
};

// 分页变化 - 每页条数改变
const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1; // 重置为第一页
    loadReportList();
};

// 格式化日期显示
const formatDate = (dateStr) => {
    if (!dateStr || typeof dateStr !== 'string') return '-';

    // 验证日期字符串是否有效
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return '-';

    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
    });
};

// 获取状态标签配置
const getStatusConfig = (status) => {
    return statusConfig[status] || { label: status, type: 'info' };
};

// 获取减员类型标签
const getReductionTypeLabel = (code) => {
    const type = reductionTypes.value.find((item) => item.value === code);
    return type ? type.label : code;
};

// 获取原因标签
const getReasonLabel = (code) => {
    const reason = reductionReasons.value.find((item) => item.value === code);
    return reason ? reason.label : code;
};

// 判断是否有减员
const isReduction = (initial, current) => {
    if (typeof initial !== 'number' || typeof current !== 'number') return null;
    return initial > current;
};

// 监听减员类型变化
const handleReductionTypeChange = () => {
    if (!isOtherReason(editForm.reduction_type_code)) {
        editForm.reduction_type_desc = '';
    }
};

// 监听是否有减员
const unwatch = watch(
    hasReduction,
    (val) => {
        if (!val) {
            editForm.reduction_type_code = '';
            editForm.reduction_type_desc = '';
            editForm.primary_reason_code = '';
            editForm.primary_reason_desc = '';
            editForm.secondary_reason_code = '';
            editForm.secondary_reason_desc = '';
            editForm.tertiary_reason_code = '';
            editForm.tertiary_reason_desc = '';
        }
    },
    { immediate: false }
);

// 获取趋势数据
const fetchTrendData = async () => {
    trendLoading.value = true;
    try {
        // 使用现有API获取所有报表数据
        const result = await fetchReportList({});
        // 确保result是数组格式
        let allData = Array.isArray(result) ? result : [];

        // 按报表期排序（假设报表期格式为YYYY-MM）
        allData.sort((a, b) => {
            return new Date(a.reporting_period + '-01') - new Date(b.reporting_period + '-01');
        });

        // 根据选择的时间范围过滤数据
        const monthsToShow = parseInt(trendTimeRange.value) * 12;
        if (allData.length > monthsToShow) {
            allData = allData.slice(-monthsToShow);
        }

        // 处理数据结构，提取需要的字段
        trendData.value = allData.map((item) => ({
            period: item.reporting_period,
            initialEmployees: Number(item.initial_employees) || 0, // 上月人数
            currentEmployees: Number(item.current_employees) || 0, // 本月人数
            reduction: Number(item.initial_employees) - Number(item.current_employees),
        }));

        trendTotal.value = trendData.value.length;
        trendShowPage.value = trendTotal.value > trendPageSize.value;
        trendCurrentPage.value = 1; // 重置为第一页

        // 初始化或更新图表
        await nextTick();
        initTrendChart();
    } catch (error) {
        console.error('获取趋势数据失败:', error);
        ElMessage.error('获取趋势数据失败');
    } finally {
        trendLoading.value = false;
    }
};

// 初始化趋势图表
const initTrendChart = () => {
    if (!trendChartRef.value || trendData.value.length === 0) return;

    // 销毁现有图表实例
    if (trendChartInstance.value) {
        trendChartInstance.value.dispose();
    }

    // 创建新的图表实例
    trendChartInstance.value = echarts.init(trendChartRef.value);

    // 获取当前页的数据
    const start = (trendCurrentPage.value - 1) * trendPageSize.value;
    const end = start + trendPageSize.value;
    const currentPageData = trendData.value.slice(start, end);

    // 设置图表选项
    const option = {
        title: {
            text: '企业人员变化趋势分析',
            left: 'center',
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach((item) => {
                    let value = item.value;
                    let unit = ' 人';
                    result += item.marker + item.seriesName + ': ' + value + unit + '<br/>';
                });
                return result;
            },
        },
        legend: {
            data: ['当月现有人数'],
            bottom: 10,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '15%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: currentPageData.map((item) => item.period),
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '人数',
                min: 0,
                axisLabel: {
                    formatter: '{value} 人',
                },
            },
        ],
        series: [
            {
                name: '当月现有人数',
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 3,
                },
                areaStyle: {
                    opacity: 0.3,
                },
                emphasis: {
                    focus: 'series',
                },
                data: currentPageData.map((item) => item.currentEmployees),
            },
        ],
    };

    // 设置图表选项
    trendChartInstance.value.setOption(option);

    // 监听窗口大小变化，调整图表大小
    window.addEventListener('resize', handleResize);
};

// 处理趋势图分页变化
const handleTrendPageChange = () => {
    initTrendChart();
};

// 处理趋势图时间范围变化
const handleTimeRangeChange = () => {
    fetchTrendData();
};

// 处理窗口大小变化
const handleResize = () => {
    if (trendChartInstance.value) {
        trendChartInstance.value.resize();
    }
};

// 切换标签时的处理
const handleTabChange = (tab) => {
    activeTab.value = tab;
    if (tab === 'trend') {
        // 切换到趋势分析标签时，加载趋势数据
        nextTick(() => {
            fetchTrendData();
        });
    }
};

// 组件挂载时加载数据
onMounted(() => {
    loadReportList();
    fetchReportById(1);
});

// 清理监听器
import { onUnmounted } from 'vue';
onUnmounted(() => {
    if (unwatch && typeof unwatch === 'function') {
        unwatch();
    }

    // 销毁图表实例和移除事件监听
    if (trendChartInstance.value) {
        trendChartInstance.value.dispose();
        trendChartInstance.value = null;
    }
    window.removeEventListener('resize', handleResize);
});
</script>

<template>
    <div class="report-search">
        <!-- 左侧固定导航 -->
        <!-- <AppSidebar /> -->

        <!-- 右侧主内容 -->
        <el-main class="search-main">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="header-left">
                    <h1 class="page-title">报表查询</h1>
                    <p class="page-description">查询和查看历史报送的报表</p>
                </div>
            </div>

            <!-- 筛选条件区域 - 仅在报表查询标签显示 -->
            <el-card v-if="activeTab === 'report'" class="search-card">
                <div class="search-form">
                    <el-row :gutter="20" align="middle">
                        <el-col :span="5">
                            <el-form-item label="报表期">
                                <el-date-picker
                                    v-model="searchForm.reportingPeriod"
                                    type="month"
                                    value-format="YYYY-MM"
                                    placeholder="请选择报表期"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="状态">
                                <el-select
                                    v-model="searchForm.status"
                                    placeholder="请选择状态"
                                    clearable
                                >
                                    <el-option label="未填报" :value="'-1'" />
                                    <el-option label="已暂存" :value="'0'" />
                                    <el-option label="待市级审核" :value="'1'" />
                                    <el-option label="待省级审核" :value="'2'" />
                                    <el-option label="审核通过" :value="'3'" />
                                    <el-option label="已归档" :value="'4'" />
                                    <el-option label="驳回" :value="'5'" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="是否减少人员">
                                <el-select
                                    v-model="searchForm.hasReduction"
                                    placeholder="请选择"
                                    clearable
                                >
                                    <el-option label="是" :value="true" />
                                    <el-option label="否" :value="false" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item>
                                <div class="search-actions">
                                    <el-button type="primary" :icon="Search" @click="handleSearch"
                                        >查询</el-button
                                    >
                                    <el-button @click="handleReset">重置</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <!-- 分页标签 -->
            <el-tabs
                v-model="activeTab"
                @tab-click="(tab) => handleTabChange(tab.paneName)"
                class="content-tabs"
            >
                <!-- 报表查询标签 -->
                <el-tab-pane label="报表查询" name="report">
                    <!-- 报表列表 -->
                    <el-card class="list-card" v-loading="loading">
                        <el-table :data="reportList" style="width: 100%">
                            <el-table-column prop="reporting_period" label="报表期" min-width="160">
                                <template #default="{ row }">
                                    {{ row.reporting_period }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" min-width="100">
                                <template #default="{ row }">
                                    <el-tag :type="getStatusConfig(String(row.status)).type">
                                        {{ getStatusConfig(String(row.status)).label }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="人数对比" min-width="140">
                                <template #default="{ row }">
                                    <div class="employee-comparison">
                                        <span>上期: {{ row.initial_employees || '-' }}</span>
                                        <span class="separator">/</span>
                                        <span>这期: {{ row.current_employees || '-' }}</span>
                                        <span
                                            v-if="
                                                isReduction(
                                                    row.initial_employees,
                                                    row.current_employees
                                                )
                                            "
                                            class="reduction-tag"
                                        >
                                            减员
                                        </span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="提交时间" min-width="180">
                                <template #default="{ row }">
                                    {{ formatDate(row.submitted_at) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" min-width="100" fixed="right">
                                <template #default="{ row }">
                                    <el-button
                                        type="primary"
                                        link
                                        :icon="View"
                                        @click="handleViewReport(row)"
                                        size="small"
                                    >
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <div class="pagination" v-if="total > 0">
                            <el-pagination
                                :current-page="currentPage"
                                :page-size="pageSize"
                                @size-change="handleSizeChange"
                                :page-sizes="[10, 20, 50]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 趋势分析标签 -->
                <el-tab-pane label="趋势分析" name="trend">
                    <el-card class="trend-card">
                        <!-- 时间范围选择 -->
                        <div class="trend-controls">
                            <el-radio-group
                                v-model="trendTimeRange"
                                @change="handleTimeRangeChange"
                                size="small"
                            >
                                <el-radio-button label="1">近1年</el-radio-button>
                                <el-radio-button label="5">近5年</el-radio-button>
                                <el-radio-button label="10">近10年</el-radio-button>
                            </el-radio-group>
                        </div>

                        <!-- 趋势图表 -->
                        <div v-loading="trendLoading" class="chart-loading">
                            <div
                                ref="trendChartRef"
                                class="trend-chart"
                                :style="{ height: '400px', width: '100%' }"
                            ></div>
                        </div>

                        <!-- 分页控制 -->
                        <div v-if="trendShowPage" class="trend-pagination">
                            <el-pagination
                                v-model:current-page="trendCurrentPage"
                                v-model:page-size="trendPageSize"
                                :page-sizes="[6, 12, 18]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="trendTotal"
                                @size-change="handleTrendPageChange"
                                @current-change="handleTrendPageChange"
                            />
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-main>

        <!-- 报表详情弹窗 -->
        <el-dialog
            v-model="detailDialogVisible"
            :title="oldReport ? `新数据与旧数据` : '报表详情'"
            width="90%"
            :show-close="false"
            :before-close="
                (done) => {
                    detailDialogVisible.value = false;
                    currentReport.value = null;
                    oldReport.value = null; // 清空旧报表数据
                    done(); // 调用done函数关闭弹窗
                }
            "
        >
            <div v-if="detailLoading" class="dialog-loading">
                <el-skeleton :rows="10" animated />
            </div>
            <div v-else-if="currentReport" class="report-detail">
                <!-- 同类数据同一行对比布局 -->
                <div v-if="oldReport" class="report-comparison-new">
                    <div class="comparison-table">
                        <!-- 报表基本信息 -->
                        <div class="comparison-row">
                            <div class="comparison-label">报表期：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{ currentReport.reporting_period || '-' }}
                                </div>
                                <div class="old-data">
                                    {{ currentReport.reporting_period || '-' }}
                                </div>
                            </div>
                        </div>

                        <!-- 人员信息对比 -->
                        <div class="comparison-row">
                            <div class="comparison-label">上期人数：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{ currentReport.initial_employees ?? '-' }}
                                </div>
                                <div class="old-data">{{ oldReport.initial_employees ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="comparison-row">
                            <div class="comparison-label">这期人数：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{ currentReport.current_employees ?? '-' }}
                                </div>
                                <div class="old-data">{{ oldReport.current_employees ?? '-' }}</div>
                            </div>
                        </div>

                        <!-- 减少人数 -->
                        <div
                            class="comparison-row"
                            v-if="
                                isReduction(
                                    currentReport.initial_employees,
                                    currentReport.current_employees
                                ) ||
                                isReduction(
                                    oldReport.initial_employees,
                                    oldReport.current_employees
                                )
                            "
                        >
                            <div class="comparison-label">减少人数：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{
                                        isReduction(
                                            currentReport.initial_employees,
                                            currentReport.current_employees
                                        )
                                            ? (currentReport.initial_employees || 0) -
                                              (currentReport.current_employees || 0)
                                            : '-'
                                    }}
                                </div>
                                <div class="old-data">
                                    {{
                                        isReduction(
                                            oldReport.initial_employees,
                                            oldReport.current_employees
                                        )
                                            ? (oldReport.initial_employees || 0) -
                                              (oldReport.current_employees || 0)
                                            : '-'
                                    }}
                                </div>
                            </div>
                        </div>

                        <!-- 减员类型 -->
                        <div class="comparison-row">
                            <div class="comparison-label">减员类型：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{
                                        getReductionTypeLabel(currentReport.reduction_type_code) ||
                                        '-'
                                    }}
                                </div>
                                <div class="old-data">
                                    {{
                                        getReductionTypeLabel(oldReport.reduction_type_code) || '-'
                                    }}
                                </div>
                            </div>
                        </div>

                        <!-- 减少原因 -->
                        <div class="comparison-row">
                            <div class="comparison-label">减少原因：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    <div v-if="currentReport.primary_reason_code">
                                        <strong>主要原因：</strong
                                        >{{
                                            getReasonLabel(currentReport.primary_reason_code) || '-'
                                        }}
                                    </div>
                                    <div
                                        v-if="currentReport.primary_reason_desc"
                                        class="reason-desc"
                                    >
                                        {{ currentReport.primary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="currentReport.secondary_reason_code">
                                        <strong>次要原因：</strong
                                        >{{
                                            getReasonLabel(currentReport.secondary_reason_code) ||
                                            '-'
                                        }}
                                    </div>
                                    <div
                                        v-if="currentReport.secondary_reason_desc"
                                        class="reason-desc"
                                    >
                                        {{ currentReport.secondary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="currentReport.tertiary_reason_code">
                                        <strong>第三原因：</strong
                                        >{{
                                            getReasonLabel(currentReport.tertiary_reason_code) ||
                                            '-'
                                        }}
                                    </div>
                                    <div
                                        v-if="currentReport.tertiary_reason_desc"
                                        class="reason-desc"
                                    >
                                        {{ currentReport.tertiary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="currentReport.reduction_type_desc">
                                        <strong>其他原因：</strong>
                                    </div>
                                    <div
                                        v-if="currentReport.reduction_type_desc"
                                        class="reason-desc"
                                    >
                                        {{ currentReport.reduction_type_desc || '-' }}
                                    </div>
                                </div>
                                <div class="old-data">
                                    <div v-if="oldReport.primary_reason_code">
                                        <strong>主要原因：</strong
                                        >{{ getReasonLabel(oldReport.primary_reason_code) || '-' }}
                                    </div>
                                    <div v-if="oldReport.primary_reason_desc" class="reason-desc">
                                        {{ oldReport.primary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="oldReport.secondary_reason_code">
                                        <strong>次要原因：</strong
                                        >{{
                                            getReasonLabel(oldReport.secondary_reason_code) || '-'
                                        }}
                                    </div>
                                    <div v-if="oldReport.secondary_reason_desc" class="reason-desc">
                                        {{ oldReport.secondary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="oldReport.tertiary_reason_code">
                                        <strong>第三原因：</strong
                                        >{{ getReasonLabel(oldReport.tertiary_reason_code) || '-' }}
                                    </div>
                                    <div v-if="oldReport.tertiary_reason_desc" class="reason-desc">
                                        {{ oldReport.tertiary_reason_desc || '-' }}
                                    </div>
                                    <div v-if="currentReport.reduction_type_desc">
                                        <strong>其他原因：</strong>
                                    </div>
                                    <div
                                        v-if="currentReport.reduction_type_desc"
                                        class="reason-desc"
                                    >
                                        {{ currentReport.reduction_type_desc || '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 时间信息 -->
                        <div class="comparison-row">
                            <div class="comparison-label">时间信息：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    <div
                                        v-if="
                                            currentReport.submitted_at || currentReport.submit_time
                                        "
                                    >
                                        提交时间：{{
                                            formatDate(
                                                currentReport.submitted_at ||
                                                    currentReport.submit_time
                                            )
                                        }}
                                    </div>
                                    <div
                                        v-if="currentReport.updated_at || currentReport.update_time"
                                    >
                                        更新时间：{{
                                            formatDate(
                                                currentReport.updated_at ||
                                                    currentReport.update_time
                                            )
                                        }}
                                    </div>
                                </div>
                                <div class="old-data">
                                    <div v-if="oldReport.createTime">
                                        创建时间：{{ formatDate(oldReport.createTime) }}
                                    </div>
                                    <div v-if="oldReport.updateTime">
                                        更新时间：{{ formatDate(oldReport.updateTime) }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 驳回原因 -->
                        <div
                            class="comparison-row"
                            v-if="
                                currentReport.status === '5' ||
                                currentReport.reason_return ||
                                oldReport.rejectReason
                            "
                        >
                            <div class="comparison-label">驳回原因：</div>
                            <div class="comparison-data">
                                <div class="current-data">
                                    {{ currentReport.reason_return || '-' }}
                                </div>
                                <div class="old-data">{{ oldReport.rejectReason || '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 无旧数据时的单栏布局 -->
                <div v-else>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="报表期">
                            {{ currentReport.reporting_period || '-' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag :type="getStatusConfig(String(currentReport.status)).type">
                                {{ getStatusConfig(String(currentReport.status)).label }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="上期人数">
                            {{ currentReport.initial_employees ?? '-' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="这期人数">
                            {{ currentReport.current_employees ?? '-' }}
                        </el-descriptions-item>
                        <el-descriptions-item
                            label="减少人数"
                            v-if="
                                isReduction(
                                    currentReport.initial_employees,
                                    currentReport.current_employees
                                )
                            "
                        >
                            {{
                                (currentReport.initial_employees || 0) -
                                (currentReport.current_employees || 0)
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item
                            label="减员类型"
                            v-if="currentReport.reduction_type_code"
                        >
                            {{ getReductionTypeLabel(currentReport.reduction_type_code) || '-' }}
                        </el-descriptions-item>
                        <el-descriptions-item
                            label="减少原因"
                            v-if="currentReport.primary_reason_code"
                        >
                            <div>
                                <div>
                                    <strong>主要原因：</strong
                                    >{{ getReasonLabel(currentReport.primary_reason_code) || '-' }}
                                </div>
                                <div class="reason-desc">
                                    {{ currentReport.primary_reason_desc || '-' }}
                                </div>
                                <div v-if="currentReport.secondary_reason_code">
                                    <strong>次要原因：</strong
                                    >{{
                                        getReasonLabel(currentReport.secondary_reason_code) || '-'
                                    }}
                                </div>
                                <div v-if="currentReport.secondary_reason_desc" class="reason-desc">
                                    {{ currentReport.secondary_reason_desc || '-' }}
                                </div>
                                <div v-if="currentReport.tertiary_reason_code">
                                    <strong>第三原因：</strong
                                    >{{ getReasonLabel(currentReport.tertiary_reason_code) || '-' }}
                                </div>
                                <div v-if="currentReport.tertiary_reason_desc" class="reason-desc">
                                    {{ currentReport.tertiary_reason_desc || '-' }}
                                </div>
                                <div v-if="currentReport.reduction_type_desc">
                                    <strong>其他原因：</strong>
                                </div>
                                <div v-if="currentReport.reduction_type_desc" class="reason-desc">
                                    {{ currentReport.reduction_type_desc || '-' }}
                                </div>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item
                            label="提交时间"
                            v-if="currentReport.submitted_at || currentReport.submit_time"
                        >
                            {{
                                formatDate(currentReport.submitted_at || currentReport.submit_time)
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                            {{ formatDate(currentReport.updated_at || currentReport.update_time) }}
                        </el-descriptions-item>
                        <el-descriptions-item
                            label="驳回原因"
                            v-if="currentReport.status === '5' && currentReport.reason_return"
                        >
                            {{ currentReport.reason_return }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <!-- 当currentReport为null或无效时显示提示信息 -->
            <div v-else class="no-data-tip">
                <el-empty description="暂无报表数据"></el-empty>
            </div>

            <!-- 底部操作按钮 -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="detailDialogVisible = false">关闭</el-button>
                    <el-button
                        type="primary"
                        :icon="Edit"
                        v-if="currentReport?.status === '5'"
                        @click="handleEditReport(currentReport)"
                    >
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 修改表单弹窗 -->
        <el-dialog
            v-model="editDialogVisible"
            title="修改报表"
            width="70%"
            :show-close="false"
            :before-close="
                (done) => {
                    editDialogVisible.value = false;
                    done(); // 调用done函数关闭弹窗
                }
            "
        >
            <div v-loading="editLoading" class="edit-form-container">
                <el-form
                    ref="editFormRef"
                    :model="editForm"
                    :rules="editRules"
                    label-width="150px"
                    label-position="left"
                    class="edit-form"
                >
                    <el-form-item label="调查期" disabled>
                        <el-input v-model="editForm.reporting_period" disabled />
                    </el-form-item>

                    <el-form-item label="上期人数" prop="initial_employees">
                        <el-input-number
                            v-model="editForm.initial_employees"
                            :min="0"
                            :max="999999999"
                            placeholder="请输入上期人数"
                        />
                    </el-form-item>

                    <el-form-item label="这期人数" prop="current_employees">
                        <el-input-number
                            v-model="editForm.current_employees"
                            :min="0"
                            :max="999999999"
                            placeholder="请输入这期人数"
                            @change="() => unwatch() || true"
                        />
                    </el-form-item>

                    <!-- 减员相关字段 -->
                    <template v-if="hasReduction">
                        <el-form-item label="减员类型" prop="reduction_type_code">
                            <el-select
                                v-model="editForm.reduction_type_code"
                                placeholder="请选择减员类型"
                                @change="handleReductionTypeChange"
                            >
                                <el-option
                                    v-for="type in reductionTypes"
                                    :key="type.value"
                                    :label="type.label"
                                    :value="type.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="减员类型说明"
                            v-if="isOtherType"
                            prop="reduction_type_desc"
                        >
                            <el-input
                                v-model="editForm.reduction_type_desc"
                                type="textarea"
                                placeholder="请详细说明减员类型"
                                :rows="3"
                            />
                        </el-form-item>

                        <el-form-item label="主要原因" prop="primary_reason_code">
                            <el-select
                                v-model="editForm.primary_reason_code"
                                placeholder="请选择主要原因"
                                @change="(val) => handleReasonChange('primary', val)"
                            >
                                <el-option
                                    v-for="reason in reasonOptions.primary"
                                    :key="reason.value"
                                    :label="reason.label"
                                    :value="reason.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="主要原因说明"
                            v-if="editForm.primary_reason_code"
                            prop="primary_reason_desc"
                        >
                            <el-input
                                v-model="editForm.primary_reason_desc"
                                type="textarea"
                                placeholder="请详细说明主要原因"
                                :rows="3"
                            />
                        </el-form-item>

                        <el-form-item label="次要原因" prop="secondary_reason_code">
                            <el-select
                                v-model="editForm.secondary_reason_code"
                                placeholder="请选择次要原因（可选）"
                                @change="(val) => handleReasonChange('secondary', val)"
                            >
                                <el-option
                                    v-for="reason in reasonOptions.secondary"
                                    :key="reason.value"
                                    :label="reason.label"
                                    :value="reason.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="次要原因说明"
                            v-if="editForm.secondary_reason_code"
                            prop="secondary_reason_desc"
                        >
                            <el-input
                                v-model="editForm.secondary_reason_desc"
                                type="textarea"
                                placeholder="请详细说明次要原因"
                                :rows="3"
                            />
                        </el-form-item>

                        <el-form-item label="第三原因" prop="tertiary_reason_code">
                            <el-select
                                v-model="editForm.tertiary_reason_code"
                                placeholder="请选择第三原因（可选）"
                                @change="(val) => handleReasonChange('tertiary', val)"
                            >
                                <el-option
                                    v-for="reason in reasonOptions.tertiary"
                                    :key="reason.value"
                                    :label="reason.label"
                                    :value="reason.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="第三原因说明"
                            v-if="editForm.tertiary_reason_code"
                            prop="tertiary_reason_desc"
                        >
                            <el-input
                                v-model="editForm.tertiary_reason_desc"
                                type="textarea"
                                placeholder="请详细说明第三原因"
                                :rows="3"
                            />
                        </el-form-item>
                    </template>
                </el-form>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSaveEdit" :loading="editLoading">
                        保存并提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.report-search {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

.search-main {
    flex: 1;
    padding: 32px;
    overflow: auto;
}

/* 页面头部 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    border-radius: 24px;
    color: white;
    box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.3);
}

.header-left {
    flex: 1;
}

.page-title {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.page-description {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* 搜索卡片 */
.search-card {
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 14px;
}

.search-form {
    padding: 20px 0;
}

.search-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding-left: 120px;
}

/* 列表卡片 */
.list-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 分页 */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* 表格样式 */
.employee-comparison {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.separator {
    margin: 0 4px;
    color: #909399;
}

.reduction-tag {
    color: #f56c6c;
    margin-left: 4px;
    font-size: 12px;
    padding: 2px 6px;
    background-color: #fef0f0;
    border-radius: 4px;
    border: 1px solid #fbc4c4;
}

/* 优化表格行高和整体视觉效果 */
:deep(.el-table) {
    font-size: 14px;
}

:deep(.el-table__row) {
    height: 48px;
}

:deep(.el-table__header th) {
    background-color: #fafafa;
    font-weight: 600;
    color: #303133;
}

/* 增强状态标签的显示效果 */
:deep(.el-tag) {
    padding: 0 10px;
}

/* 详情弹窗 */
.dialog-loading {
    padding: 20px 0;
}

.report-detail {
    max-height: 60vh;
    overflow-y: auto;
}

.reason-desc {
    margin-top: 8px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
}

/* 修改表单样式 */
.edit-form-container {
    max-height: 70vh;
    overflow-y: auto;
}

.edit-form {
    padding: 20px 0;
}

.edit-form .el-form-item {
    margin-bottom: 24px;
}

.no-data-tip {
    padding: 40px 0;
    text-align: center;
}

/* 分页标签样式 */
.content-tabs {
    margin-top: 20px;
}

/* 趋势分析相关样式 */
.trend-card {
    margin-bottom: 20px;
}

.trend-controls {
    margin-bottom: 20px;
    text-align: center;
}

.chart-loading {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    border-radius: 4px;
}

.trend-chart {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.trend-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.trend-description {
    margin-top: 20px;
    background-color: #f0f2f5;
    padding: 10px;
    border-radius: 4px;
}

/* 保留的原有样式（用于兼容无旧数据情况） */
.report-comparison {
    display: flex;
    justify-content: space-between;
}

.report-column {
    width: 48%;
}

.report-header {
    margin-bottom: 20px;
}

.report-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

/* 新的报表对比样式 */
.report-comparison-new {
    padding: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.comparison-table {
    width: 100%;
}

.comparison-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-label {
    width: 120px;
    font-weight: 600;
    color: #606266;
    text-align: right;
    padding-right: 20px;
    flex-shrink: 0;
}

.comparison-data {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.current-data {
    flex: 1;
    margin-right: 10px;
    color: #303133;
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}

.old-data {
    flex: 1;
    margin-left: 10px;
    color: #606266;
    background-color: #f5f7fa;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}

.reason-desc {
    margin-top: 5px;
    color: #909399;
    font-size: 14px;
    line-height: 1.5;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .report-comparison {
        flex-direction: column;
    }

    .report-column {
        width: 100%;
        margin-bottom: 20px;
    }

    .comparison-row {
        flex-direction: column;
    }

    .comparison-label {
        width: auto;
        text-align: left;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .comparison-data {
        flex-direction: column;
    }

    .current-data,
    .old-data {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }

    .old-data {
        padding-left: 10px;
        margin-bottom: 0;
    }
}

/* 大屏幕样式优化 */
@media (min-width: 1200px) {
    .comparison-row {
        padding: 16px 0;
    }

    .comparison-label {
        width: 150px;
    }

    .current-data,
    .old-data {
        padding: 12px 16px;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
</style>
